import React, { Component } from 'react';
import { search } from '../../api/index'
import List from '../../components/List'
import Navbar from '../../components/NavBar';
class Index extends Component {
	state = {
		searchValue: '',
		searchList: []
	}
	async handleSearch() {
		const { searchValue } = this.state
		const resp = await search({ searchValue })
		const { data } = resp.data
		this.setState({ searchList: data })
	}
	toDetail = (v) => {
		// 跳转详情
		this.props.history.push({
			// 跳转路径
			pathname: '/detail',
			// 发送的数据（隐身路由）
			state: v
		})
	}
	componentDidMount() {
		this.handleSearch()
	}
	handleEnter(e) {
		e.keyCode === 13 && this.handleSearch()
	}
	render() {
		const { searchValue, searchList } = this.state
		return (
			<div>
				<Navbar 
					rightValue={ <button>搜索</button> }
					onRightClick = { () => this.handleSearch() } 
					leftValue=''
					>
						<input type="text"
							style={{
								flex: 1
							}}
							value={searchValue}
							onChange={e => this.setState({ searchValue: e.target.value })}
							onKeyDown={ e => this.handleEnter(e)  }
						/>
				</Navbar>
				
				<div>
					<List list={searchList} vertical toDetail={ this.toDetail }></List>
				</div>
			</div>
		);
	}
}

export default Index;
